<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useIndexStore } from '@/store/index'
const router = useRouter()
const indexStore = useIndexStore()
function goTodo() {
  router.push({
    path: "/todo",
  })
}
function modifyStoreData() {
  console.log(indexStore.count)
  console.log(indexStore.user.name)
  console.log(indexStore.doubleCount)
  console.log(indexStore.username)

  // 修改state数据方式1
  indexStore.count = 11
  indexStore.$state.count = 11

  // 修改state数据方式2
  indexStore.$patch({
    count: 11
  })
  indexStore.$patch(state => {
    state.count = 11
  })

  // 修改state数据方式3（不建议）
  // indexStore.$state = { // 报错
  //   count: 11
  // }

  // 修改state数据方式4（建议）
  indexStore.setCount(11)
}
</script>

<template>
  <div>
    <a-button type="primary" @click="goTodo">TodoList</a-button>
    <a-button type="primary" @click="modifyStoreData">pinia</a-button>
  </div>
</template>

<style scoped></style>
